<template>
	<view class="strategyDiv">
		<!-- 我的攻略页面-->
		<u-sticky>
			<u-search placeholder="名称" v-model="name" :showAction="true" actionText="搜索" @search="searchTitle"
				@custom="customTitle"></u-search>
		</u-sticky>

		<view class="strategyList">
			<u-swipe-action>
				<u-swipe-action-item :options="options1" v-for="(item,index) in strategyList" :key="index"
					@click="delData($event,item)">
					<view class="strategyItem" @click="goDetails(item)">
						<view class="strategyItemI">
							<img :src="item.photo[0]" alt="" />
						</view>
						<view class="strategyItemB">
							<view class="strategyItemBP">
								{{item.title}}
							</view>
							<view class="strategyItemBT">
								<u-tag :text="it" shape="circle" plain size="mini" v-for="(it,ind) in item.label"
									:key="ind"></u-tag>
							</view>
							<view class="strategyItemBC">
								{{item.content}}
							</view>
							<view class="strategyItemBA">
								<u-avatar :src="item.profilePhoto" shape="circle" size="30"></u-avatar>
								<span>{{item.nickName}}</span>
							</view>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</view>
		<view class="load-more" v-if="showLoading">
			<text>滑动到底部加载更多</text>
		</view>
		<view class="load-more" v-if="showNoMore">
			<text>没有更多数据了</text>
		</view>
		<view class="strategyDivIcon" @click="goAdd">
			<u-icon name="plus-circle-fill" size="36"></u-icon>
		</view>
	</view>
</template>

<script>
	import {
		strategyList,
		strategyDelete
	} from '@/api/userCenter.js'
	export default {
		data() {
			return {
				name: '',
				strategyList: [],
				options1: [{
					text: '修改',
					style: {
						backgroundColor: '#3c9cff'
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				pageNum: 1, // 当前页码
				pageSize: 10, // 每页条数
				total: 0, // 总数据量
				isLoading: false, // 是否正在加载
				showLoading: false, // 显示加载中
				showNoMore: false // 显示没有更多
			};
		},
		onShow() {
			this.getStrategyList()
		},
		// 页面滚动到底部
		onReachBottom() {
			// 页面滚动到底部时触发
			if (this.strategyList.length < this.total) {
				this.pageSize += 10;
				this.getStrategyList();
			} else if (this.strategyList.length >= this.total) {
				this.showNoMore = true;
				this.showLoading = false;
			}
		},
		methods: {
			// 跳转到详情
			goDetails(item) {
				uni.navigateTo({
					url: `/pages/strategyDetails/strategyDetails?id=${item.id}`
				})
			},
			// 跳转到新增页面
			goAdd() {
				uni.navigateTo({
					url: `/pages/strategyAdd/strategyAdd`
				})
			},
			// 删除数据
			async delData(e, item) {
				if (e.index == 0) {
					uni.navigateTo({
						url: `/pages/strategyAdd/strategyAdd?id=${item.id}`
					})
				} else if (e.index == 1) {
					let res = await strategyDelete(item.id)
					if (res.code == 200) {
						this.getStrategyList()
					}
				}

			},
			// 获取攻略列表
			async getStrategyList() {
				// 显示加载状态
				this.isLoading = true;
				this.showLoading = true;
				this.showNoMore = false;
				let par = {
					name: this.name,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				let res = await strategyList(par)
				if (res.code == 200) {
					const newData = res.data.records;
					this.total = res.data.total;
					// 合并数据
					if (this.pageNum == 1) {
						this.strategyList = newData;
					} else {
						this.strategyList = this.strategyList.concat(newData);
					}

					// 控制显示状态
					if (this.strategyList.length >= this.total) {
						this.showNoMore = true;
						this.showLoading = false;
					} else {
						this.showNoMore = false;
						this.showLoading = true;
					}
				} else {
					// 无论成功失败，都结束加载状态
					this.isLoading = false;
					this.showLoading = false;
				}
			},
			// 点击手机键盘搜索按钮
			searchTitle() {
				this.getStrategyList()
			},
			// 点击右侧的搜索按钮
			customTitle() {
				this.getStrategyList()
			}
		}
	}
</script>

<style lang="scss">
	.strategyDiv {
		width: 100%;
		min-height: 100vh;
		overflow-y: auto;
		padding: 20rpx;
		position: relative;

		.strategyDivIcon {
			position: absolute;
			right: 40rpx;
			bottom: 200rpx;
			z-index: 999;
		}

		.strategyList {
			margin-top: 30rpx;

			.strategyItem {
				width: 100%;
				padding: 10rpx;
				display: flex;
				gap: 20rpx;

				.strategyItemB {
					width: calc(100% - 220rpx);

					.strategyItemBP {
						font-size: 40rpx;
						width: 100%;
						white-space: nowrap;
						/* 禁止文本换行 */
						overflow: hidden;
						/* 超出容器部分隐藏 */
						text-overflow: ellipsis;
						/* 超出部分显示省略号 */
					}

					.strategyItemBC {
						width: 100%;
						white-space: nowrap;
						/* 禁止文本换行 */
						overflow: hidden;
						/* 超出容器部分隐藏 */
						text-overflow: ellipsis;
						/* 超出部分显示省略号 */
						font-size: 26rpx;
						color: #666;
						margin-bottom: 20rpx;
					}

					.strategyItemBA {
						display: flex;
						align-items: center;
						gap: 20rpx;

						span {
							font-size: 24rpx;
							color: #666;
						}
					}

					.strategyItemBT {
						display: flex;
						align-items: center;
						gap: 10rpx;
						margin: 10rpx;

						::v-deep .u-tag__text--mini {
							font-size: 20rpx;
						}
					}
				}

				.strategyItemI {
					width: 200rpx;
					min-height: 150rpx;

					img {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}
			}
		}

		.load-more {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #666;
		}

		/* 加载动画 */
		.loading-spinner {
			width: 30rpx;
			height: 30rpx;
			border: 3rpx solid #ccc;
			border-top-color: #333;
			border-radius: 50%;
			animation: spin 1s linear infinite;
			margin-right: 16rpx;
		}

		@keyframes spin {
			to {
				transform: rotate(360deg);
			}
		}
	}
</style>